<template>
  <div>
    <div class="coustom-font">
      <el-row style="display:flex">
        所属单位:
        <el-select class="el-select" v-model="value" placeholder="请选择 所属单位" style="width: 200px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        单位限制:
        <el-select v-model="value" placeholder="包括下级单位" style="width: 200px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        选择站点:
        <el-select v-model="value" placeholder="请选择 选择站点" style="width: 200px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        报警类型:
        <el-select v-model="value" placeholder="请选择 报警类型" style="width: 200px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-row>
      <el-row style="margin-top: 10px">
        设备类型:
        <el-select v-model="value" placeholder="请选择 设备类型" style="width: 200px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        设备号：&nbsp;
        <el-select v-model="value" placeholder="请选择 设备号" style="width: 200px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        状态：&nbsp;&nbsp;&nbsp;&nbsp;
        <el-select v-model="value" placeholder="未处理" style="width: 200px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        处理类型:
        <el-select v-model="value" placeholder="请选择 处理类型" style="width: 200px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-row>
      <el-row style="display:flex;margin-top: 10px">
        <div class="block" style="">
          开始时间:
          <el-date-picker
              v-model="value1"
              placeholder="请选择 开始时间"
              style="width: 200px"
              type="datetime">
          </el-date-picker>
        </div>
        <div class="block">
                    <span class="demonstration">
                        结束时间:
                    </span>
          <el-date-picker
              v-model="value1"
              placeholder="请选择 结束时间"
              style="width: 200px"
              type="datetime">
          </el-date-picker>

          <button class=" el-button el-button--primary el-button--small" type="button">
            <i class="el-icon-search"></i>
            搜 索
          </button>
          <button class="el-button el-button--default el-button--small" type="button">
            <i class="el-icon-delete"></i>
            <span>清 空</span>
          </button>
        </div>
      </el-row>
    </div>
    <div>
      <el-row>
        <div class="all-card-headleft">
          <button class="el-button el-button--default el-button--small" type="button">
            <span>批量处理</span>
          </button>
          <button class="el-button el-button--default el-button--small" type="button" @click="open1">
            <span>批量导出</span>
          </button>
        </div>
        <div class="all-card-headright" style="">
          <button class="el-button  el-button--small is-circle " type="button">
            <i class="el-icon-download" @click="open2"></i>
          </button>
          <button class="el-button  el-button--small is-circle " type="button">
            <i class="el-icon-refresh"></i>
          </button>
          <button class="el-button el-button--small is-circle " type="button">
            <i class="el-icon-s-operation"></i>
          </button>
          <button class="el-button el-button--default el-button--small is-circle avue-crud__searchShowBtn"
                  type="button">
            <i class="el-icon-search"></i>
          </button>
        </div>
      </el-row>
    </div>
    <div class="boarderstyle">
      当前表格已选择0项
      <button class="el-button el-button--text el-button--small" type="button">
        <span>清 空</span>
      </button>
    </div>
    <div>
      <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            label="所属单位"
            prop="a">
        </el-table-column>
        <el-table-column
            label="设备"
            prop="b">
        </el-table-column>
        <el-table-column
            label="报警类型"
            prop="c">
        </el-table-column>
        <el-table-column
            label="设备类型"
            prop="d">
        </el-table-column>
        <el-table-column
            label="设备号"
            prop="e">
        </el-table-column>
        <el-table-column
            label="报警内容"
            prop="f">
        </el-table-column>
        <el-table-column
            label="站点地址"
            prop="g">
        </el-table-column>
        <el-table-column
            label="报警地址"
            prop="h">
        </el-table-column>
        <el-table-column
            label="状态"
            prop="i">
          <span class="el-tag el-tag--danger el-tag--light">未处理</span>
        </el-table-column>
        <el-table-column
            label="报警图"
            prop="j">
        </el-table-column>
        <el-table-column
            label="历史报警"
            prop="k">
        </el-table-column>
        <el-table-column
            label="上报时间"
            prop="l">
        </el-table-column>
        <el-table-column
            label="处理类型"
            prop="m">
        </el-table-column>
        <el-table-column
            label="备注"
            prop="n">
        </el-table-column>
        <el-table-column
            label="处理记录图"
            prop="o">
        </el-table-column>
        <el-table-column
            label="处理时间"
            prop="p">
        </el-table-column>
        <el-table-column
            label="操作"
            prop="q">
          <el-tag class="el-button el-button--success el-button--mini is-plain"
                  style="margin: 3px;" @click="dialogTableVisible = true">
            通知记录
          </el-tag>
          <el-tag class="el-button el-button--success el-button--mini is-plain" style="margin: 3px;"
                  @click="open3">
            联动记录
          </el-tag>
          <el-tag class="el-button el-button--success el-button--mini is-plain"
                  style="margin: 3px;" @click="dialogTableVisible = true">
            微信记录
          </el-tag>
          <el-tag class="el-button el-button--success el-button--mini is-plain" style="margin: 3px;">
            详情
          </el-tag>
          <el-tag class="el-button el-button--success el-button--mini is-plain"
                  style="margin: 3px;" @click="dialogFormVisible = true">
            <span>处理</span>
          </el-tag>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="dialogTableVisible" title="通信记录">
        <div class="mmm">
          <button class="el-button el-button--small is-circle " type="button">
            <i class="el-icon-s-operation"></i>
          </button>
          <button class="el-button el-button--default el-button--small is-circle avue-crud__searchShowBtn"
                  type="button">
            <i class="el-icon-search"></i>
          </button>
        </div>
        <el-table :data="gridData">
          <el-table-column label="设备号" property="a" width="150"></el-table-column>
          <el-table-column label="手机号" property="b" width="200"></el-table-column>
          <el-table-column label="类型" property="c"></el-table-column>
          <el-table-column label="扣除方式" property="d"></el-table-column>
          <el-table-column label="状态" property="e"></el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog :visible.sync="dialogFormVisible" title="收货地址">
        <el-form :model="form">
          <el-form-item :label-width="formLabelWidth" label="处理类型">
            <el-select v-model="form.region" placeholder="请选择 处理类型">
              <el-option label="测试" value="shanghai"></el-option>
              <el-option label="误报" value="beijing"></el-option>
              <el-option label="真实" value="shanghai"></el-option>
              <el-option label="其他" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="备注">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="block">
      <el-pagination :current-page="currentPage4"
                     :page-size="10"
                     :page-sizes="[10, 20, 30, 40]"
                     :total="40"
                     class="pagination-container"
                     layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      gridData: [{
        a: '123',
        b: '1',
        c: '2',
        d: '3',
        e: '0',
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      tableData: [{
        a: '开发区环境局',
        b: '烟感',
        c: '测试',
        d: '感烟探测器',
        e: '868913',
        f: '报警测试',
        g: '朔城区振华东街',
        h: '五楼答题',
        i: '',
        j: '',
        k: '',
        l: '',
        m: '',
        n: '',
        o: '',
        p: '',
        q: '',
      }],
    };
    return {
      toggleSelection: false
    };
    return {
      formInline: {
        user: '',
        region: ''
      }
    };
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    };
  },
  methods: {
    open3() {
      this.$message('暂无现场报警记录');
    },
    onSubmit() {
      console.log('submit!');
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    open1() {
      this.$alert('总共导出14', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
      });
    },
    open2() {
      this.$alert('是否确定下载文件', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
      });
    },

  }

}
</script>

<style>
.coustom-font {
  font-size: 15px;
  color: white;
}

:deep(.el-select el-select__wrapper el-tooltip__trigger el-tooltip__trigger) {
  background-color: #0f6cbc;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}

.el-button--primary {
  color: #fff;
  border-color: #0f6cbc;
  background: #0f6cbc;
  background-color: #0f6cbc;
}

.el-button--small {
  font-size: 12px;
  border-radius: 3px;
}

.el-button {
  background: #0f6cbc;
  background-color: #0f6cbc;
  border: 1px solid #dcdfe6;
  border-color: hsla(0, 0%, 100%, 0);
  color: #fff;
  text-align: center;
  box-sizing: border-box;
}

.all-card-headleft {
}

.all-card-headright {
  display: flex;
  justify-content: flex-end;
}

.boarderstyle {
  boarder-radius: 4px;
  box-sizing: border-box;
  padding: 0;
  color: #2196f3;
  border-width: 1px;
  border-style: solid;
  font-size: 14px;
}

.el-table th.el-table__cell {
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #3F51B5;
}

.el-table td.el-table__cell {
  height: 12px;
}

.cell {
  color: white;
}

.el-table__cell {
  background-color: #242E66;
}

.el-button--text {
  border-color: transparent;
  color: #0ff;
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
}

.mmm {
  display: flex;
  justify-content: end;
}
</style>
